<div class="layui-card">
  <div class="layui-breadcrumb" lay-filter="breadcrumb" style="padding: 0 15px;line-height: 50px;">
    <a lay-href="">概览</a>
    <a><cite>基础设置</cite></a>
    <a><cite>公式管理</cite></a>
  </div>
  <div class="luomi-title" style="margin-top: 10px;margin-left: -60px; display: flex;justify-content: center;"></div>
</div>





<div class="search">
  <div>
    <form class="layui-form" action="" lay-filter="formulaForm">
      <div class="layui-form-item">
        <div class="layui-input-inline" style="width:20%;margin-right: 20px;">
          <input type="text" name="ftagname" value="" placeholder="公式编码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width:20%;margin-right: 20px;">
          <input type="text" name="fname" value="" placeholder="公式名称" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 20%;margin-right: 20px;">
          <select name="ftype" lay-verify="required">
            <option value="0">全部类型</option>
            <option value="1">计算点</option>
            <option value="2">用户点</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-inline" style="width:20%;margin-right:20px">
          <select name="date" lay-verify="required" lay-filter="dateSelect">
            <option value="day">日</option>
            <option value="month">月</option>
            <option value="year">年</option>
          </select>
        </div>
        <div class="layui-input-inline " style="width:30%;margin-right:20px;display: flex;">
          <input type="text" name="year" lay-filter="year" placeholder="yyyy" autocomplete="off"
            class="layui-input hide" id="year" style="width: 67%;">
          <input type="text" name="month" lay-filter="month" placeholder="yyyy-MM" autocomplete="off"
            class="layui-input hide" id="month" style="margin-right: 20px;">
          <input type="text" name="month2" lay-filter="month2" placeholder="yyyy-MM" autocomplete="off"
            class="layui-input hide" id="month2">
          <input type="text" name="day" lay-filter="day" placeholder="yyyy-MM-DD" autocomplete="off"
            class="layui-input " id="day" style="margin-right: 20px;">
          <input type="text" name="day2" lay-filter="day" placeholder="yyyy-MM-DD" autocomplete="off"
            class="layui-input " id="day2">
        </div>
        <div class="layui-input-inline">
          <button type="button" class="layui-btn layui-btn" lay-submit lay-filter="LAY-formula-search">搜索</button>
        </div>
      </div>



    </form>
  </div>

  <table id="formulaTable" lay-filter="formulaTable"></table>
</div>

<script type="text/html" id="formulaBar">
  <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">
    <i class="layui-icon layui-icon-addition"></i>
    增加
  </button>
  <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">
    <i class="layui-icon  layui-icon-edit"></i>
    修改
  </button>
  <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
    <i class="layui-icon layui-icon-delete"></i>
    删除
  </button>
</script>

<script type="text/html" id="ftype">
  {{# if(d.ftype == '1') { }}
  计算点
  {{# } else { }}
  用户点
  {{# } }}
</script>


<style>
  .hide {
    display: none;
  }
</style>


<script>
  layui.use(['admin', 'laytpl', 'form', 'laypage', 'layer', 'view',
    'setter', 'upload', 'laydate'
  ], function () {
    var $ = layui.$,
      admin = layui.admin,
      table = layui.table,
      laytpl = layui.laytpl,
      form = layui.form,
      laypage = layui.laypage,
      layer = layui.layer,
      laydate = layui.laydate
    view = layui.view,
      setter = layui.setter;
    form.render();

    var token = layui.data(layui.setter.tableName).token


    var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth(); //得到月份
    var date = now.getDate(); //得到日期
    month = month + 1;
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;
    var nowTime = year + "-" + month + "-" + date;






    var getTable = function (dayMonthYear, ftagname, fname, ftype, intime, outime) {



      //第一个实例
      table.render({
        elem: '#formulaTable',
        url: setter.urlTest + 'formula/formulaPaging' //数据接口
          ,
        page: true,
        method: 'post',
        where: {
          token: token,
          dayMonthYear,
          ftagname,
          fname,
          ftype,
          intime,
          outime
        },
        // ,response:{
        //     statusName:'code',
        //     statusCode:200,
        //     dataName:'Datas',
        //     countName: "code",
        // },
        parseData: function (res) {
          var value = {
            code: res.code,
            msg: res.message ? res.message : "",
            Datas: res.jsonArray ? res.jsonArray : [],
          }
          return {
            "code": res.code,
            "msg": value.msg,
            "count": res.count,
            "data": value.Datas
          }
        },
        request: {
          pageName: 'pageindex' //页码的参数名称，默认：page
            ,
          limitName: 'pagesize' //每页数据量的参数名，默认：limit
        },
        response: {
          statusName: 'code',
          statusCode: 200
        },
        toolbar: "#formulaBar",
        defaultToolbar: [],
        cols: [
          [ //表头
            {
              type: 'checkbox'
            },
            {
              field: 'fid',
              title: '公式ID',
              width: 80
            }, {
              field: 'ftagname',
              title: '公式编码'
            }, {
              field: 'fname',
              title: '公式名称'
            }, {
              text: 'ftype',
              title: '公式类型',
              templet: '#ftype',
              width: 120
            }, {
              field: 'formulaviwe',
              title: '公式内容'
            }, {
              field: 'val',
              title: '计算结果'
            }, {
              field: 'Remark',
              title: '公式说明'
            }
          ]
        ]
      });
    }

    getTable('day', '', '', '', nowTime, nowTime)

    table.on('toolbar(formulaTable)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      if (obj.event === 'add') {
        admin.popup({
          title: '新建公式',
          area: ['600px', '500px'],
          id: 'LAY-popup-formula-add',
          success: function (layero, index) {
            view(this.id).render('/formula/formula-popup-add').done(function () {
              form.on('submit(LAY-formula-add)', function (obj) {
                var data = obj.field;
                console.log(data);
                admin.req({
                  method: 'post',
                  url: setter.urlTest + "/formula/addFormula",
                  data: {
                    // token:'888833CC22117777999922FF22664499',
                    fname: data.fname,
                    formula: data.formula,
                    formulaviwe: data.formulaview,
                    ftagname: data.ftagname,
                    ftype: data.ftype,
                    remark: data.remark
                  },
                  done: function (res) {
                    layer.msg(res.message)
                    layui.table.reload('formulaTable');
                    layer.close(index)
                  }
                })
              })
            })
          }
        })
      } else if (obj.event === 'edit') {
        if (checkStatus.data.length > 1) {
          layer.msg('每次只能修改一条公式')
        } else if (checkStatus.data.length == 0) {
          layer.msg('请选择公式后修改')
        } else {
          var fid = checkStatus.data[0].fid
          // console.log(checkStatus.data[0]);
          admin.popup({
            title: '编辑公式',
            area: ['600px', '500px'],
            id: 'LAY-popup-formula-edit',
            success: function (layero, index) {
              view(this.id).render('/formula/formula-popup-add', checkStatus.data[0]).done(function () {
                form.on('submit(LAY-formula-add)', function (obj) {
                  var data = obj.field;
                  console.log(data);
                  console.log(fid);
                  admin.req({
                    method: 'post',
                    url: setter.urlTest + '/formula/UpdateFormula',
                    data: {
                      // token:'888833CC22117777999922FF22664499',
                      fid: fid,
                      fname: data.fname,
                      formula: data.formula,
                      formulaviwe: data.formulaview,
                      ftagname: data.ftagname,
                      ftype: data.ftype,
                      remark: data.remark
                    },
                    done: function (res) {
                      layer.msg(res.message)
                      layui.table.reload('formulaTable');
                      layer.close(index)
                    }
                  })

                })

              })

            }

          });
        }
      } else if (obj.event === 'delete') {
        if (checkStatus.data.length != 0) {
          layer.confirm('确定要删除公式吗?', {
            btn: ['删除', '取消']
          }, function (index) {
            var mid = ''
            layui.each(checkStatus.data, function (index, item) {
              // console.log(item);
              mid += item.fid + ','
            })
            mid = mid.substr(0, mid.length - 1)
            // console.log(mid);
            admin.req({
              method: 'post',
              url: setter.urlTest + '/formula/delFormula',
              data: {
                // token:'888833CC22117777999922FF22664499',
                mid: mid
              },
              done: function (res) {
                layui.table.reload('formulaTable'); //重载表格
                layer.msg(res.message)
              }
            })
          })
        } else {
          layer.msg('请选择要删除的公式')
        }
      }
    })

    laydate.render({
      elem: "#day",
      value: new Date()
    })
    laydate.render({
      elem: "#day2",
      value: new Date()
    })
    form.on('select(dateSelect)', function (event) {
      if (event.value === 'month') {
        laydate.render({
          elem: "#month",
          type: 'month',
          value: new Date()
        })
        laydate.render({
          elem: "#month2",
          type: 'month',
          value: new Date()
        })
        $('#month').removeClass('hide').siblings().addClass('hide')
        $('#month2').removeClass('hide')
      } else if (event.value === 'day') {
        laydate.render({
          elem: "#day",
          value: new Date()
        })
        laydate.render({
          elem: "#day2",
          value: new Date()
        })
        $('#day').removeClass('hide').siblings().addClass('hide')
        $('#day2').removeClass('hide');
      } else {
        laydate.render({
          elem: '#year',
          type: 'year',
          value: new Date()
        })
        $('#year').removeClass('hide').siblings().addClass('hide')
      }

    })

    form.on('submit(LAY-formula-search)', function (obj) {
      var data = obj.field;
      var dayMonthYear = data.date;
      var ftagname = data.ftagname;
      var fname = data.fname
      var ftype = data.ftype == "0" ? "" : data.ftype
      if (dayMonthYear === 'year') {
        var intime = data.year;
        var outime = data.year
      } else if (dayMonthYear === 'month') {
        var intime = data.month
        var outime = data.month2
      } else if (dayMonthYear === 'day') {
        var intime = data.day
        var outime = data.day2
      }
      getTable(dayMonthYear, ftagname, fname, ftype, intime, outime)

    })



  });
</script>